<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
			width: 100px;
			height: 100px;
			background-image: url("./img/trump_run.png");
			margin:50px auto;
			animation: front steps(6) 1s infinite;
			}
			
			@keyframes front{
				from{background-position: 0 0;}
				to{background-position: -600px 0;}
			}
			
			.box2{
			width: 100px;
			height: 100px;
			background-image: url("./img/trump_run.png");
			margin:20px auto;
			background-position: 0 -100px;
			animation: right1 steps(6) 1s infinite;
			}
			
			@keyframes right1{
				from{background-position: 0px -100px;}
				to{background-position: -600px -100px;}
			}
			
			.box3{
			width: 100px;
			height: 100px;
			background-image: url("./img/trump_run.png");
			margin:20px auto;
			animation: right2 steps(6) 1s infinite;
			}
			
			@keyframes right2{
				from{background-position: 0px -200px;}
				to{background-position: -600px -200px;}
			}
			
			.box4{
			width: 100px;
			height: 100px;
			background-image: url("./img/trump_run.png");
			margin:20px auto;
			animation: right3 steps(6) 1s infinite;
			}
			
			@keyframes right3{
				from{background-position: 0px -300px;}
				to{background-position: -600px -300px;}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>
